<%@ page language="java" contentType="text/html; charset=utf-8"
		 pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
	<base href="<%=basePath%>">
	<title>家庭动态</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
	<link rel="stylesheet" href="css/common.css" type="text/css" media="all" />
	<link href="css/zeroModal.css" rel="stylesheet">
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/font-awesome.min.css" rel="stylesheet">
	<link href="css/animate.min.css" rel="stylesheet">
	<link href="css/tjlxr.min.css" rel="stylesheet">

	<script src="js/jquery-1.8.2.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/content.min.js"></script>

	<script src="js/zeroModal.js"></script>
	<script type="text/javascript">
		/* 点赞效果 */
        $(document).ready(function(){

            $('body').on("click",'.heart',function(){

                var A=$(this).attr("id");
                var B=A.split("like");
                var messageID=B[1];
                var C=parseInt($("#likeCount"+messageID).html());
                $(this).css("background-position","");
                var D=$(this).attr("rel");

                if(D === 'like') {
                    $("#likeCount"+messageID).html(C+1);
                    $(this).addClass("heartAnimation").attr("rel","unlike");
                }
                else{
                    $("#likeCount"+messageID).html(C-1);
                    $(this).removeClass("heartAnimation").attr("rel","like");
                    $(this).css("background-position","left");
                }
            });

        });


        function talkFun(){
            var talk = $("textarea[name='talk1']").val();
            var formData = new FormData($("#uploadfiles")[0]);
            if(talk.trim()==""){
                alert("动态为空！");
            }else{
                $.ajax({
                    type: "post",
                    url: "speakController/upload?talk="+talk,
                    dataType: "json",
                    data: formData,
                    /**
                     *必须false才会自动加上正确的Content-Type
                     */
                    contentType : false,
                    /**
                     * 必须false才会避开jQuery对 formdata 的默认处理
                     * XMLHttpRequest会对 formdata 进行正确的处理
                     */
                    processData : false,
                    success: function(msg){//从后端返回数据进行处理
                        if(msg=='0'){
                            //首先上传图片，图片上传成功后，将发表内容
                            //设置图片为空
                            $("#talk1").val("");
                            $("#picture").attr("value","");
                            window.location.reload();
                        }else if(msg=='1'){
                            $("#msg").html("* 请选择正确的图片！");
                        }else{
                            $("#msg").html("* 上传失败！");
                        }
                    },
                    error: function(err) {//提交出错
                        $("#msg").html(JSON.stringify(err));//打出响应信息
                    }
                });
            }
        }

        function commentFun(speakId){
            var com = 'com'+speakId;
            var comment = $("input[id='"+com+"']").val();
            if(comment.trim()==""){
                alert('评论为空');
            }else{
                $.ajax({
                    type:"post",
                    url:"speakController/comment",
                    data:{speakId:speakId,comment:comment},            // 这里把表单里面的数据放在这里传到后台
                    dataType:"json",
                    success:function(date){
                        $("#"+com).val("");
                        window.location.reload();
                    },
                    error:function(){
                        alert('评论失败！');
                    }
                });
            }
        }
        function quitFun(){
            $.ajax({
                type:"post",
                url:"userController/quit",      // 这里是提交到什么地方的url
                data:{},            // 这里把表单里面的数据放在这里传到后台
                dataType:"json",
                success:function(date){
                    window.location.href="login.jsp"
                }
				/*  error:function(){
				 $("#msg").html("用户名或密码错误！");
				 }  */
            });
        }
        function cmt(commentId){
            var content = $("input[id='"+commentId+"']").val();
            if(content.trim()==''){
                alert('回复不能为空！');
            }else{
                $.ajax({
                    type:"post",
                    url:"speakController/selfComment",
                    data:{commentId:commentId,content:content},            // 这里把表单里面的数据放在这里传到后台
                    dataType:"json",
                    success:function(date){
                        $("#"+commentId).val("");
                        window.location.reload();
                    },
                    error:function(){
                        alert('回复失败！');
                    }
                });
            }

        }
        function good(speakId){
            $.ajax({
                type:"post",
                url:"speakController/good",
                data:{speakId:speakId},            // 这里把表单里面的数据放在这里传到后台
                dataType:"json",
                success:function(date){
                    $('#like${speak.id}').css("background-position","right");
                    window.location.reload();

                    //$(".txt").load(location.href+" .txt");
                },
                error:function(){
                    alert('回复失败！');
                }
            });
        }

        //删除弹框函数
        function firm(id,hasCom) {
            if(hasCom){
                zeroModal.confirm({
                    content: '该评论下已有回复，是否全部删除？',
                    contentDetail: '删除后将不再显示',
                    okFn: function() {
                        deleteCom(id);
                    },
                    cancelFn: function() {

                    }
                });
			}else{
                zeroModal.confirm({
                    content: '是否要删除该条评论？',
                    contentDetail: '删除后将不再显示',
                    okFn: function() {
                        deleteCom(id);
                    },
                    cancelFn: function() {

                    }
                });
			}

        }
        function deleteCom(commentId){
            $.ajax({
                type:"post",
                url:"speakController/deleteCom",
                data:{commentId:commentId},            // 这里把表单里面的数据放在这里传到后台
                dataType:"json",
                success:function(flag){
                    if(flag=='0'){
                        zeroModal.success('该评论已删除!');
                        setTimeout(function () {
                            window.location.reload();
                        },1000)
					}
                },
                error:function(){
                    zeroModal.success('该评论删除失败!');
                }
            });
		}

		function firmSpeak(speakId) {
            zeroModal.confirm({
                content: '是否要删除该动态的所有信息？',
                contentDetail: '删除后将不再显示',
                okFn: function() {
                    deleteSpeak(speakId);
                },
                cancelFn: function() {

                }
            });
        }
        function deleteSpeak(speakId) {
            $.ajax({
                type:"post",
                url:"speakController/deleteSpeak",
                data:{speakId:speakId},            // 这里把表单里面的数据放在这里传到后台
                dataType:"json",
                success:function(flag){
                    if(flag=='0'){
                        zeroModal.success('该动态已删除!');
                        setTimeout(function () {
                            window.location.reload();
                        },1000)
                    }
                },
                error:function(){
                    zeroModal.success('动态删除失败!');
                }
            });
        }
	</script>
</head>
<body style="font-size: 16px;">
<div id="head">
	<div class="wrap">
		<span id="user" style="color:#99CC00;">${user.userName}，欢迎来到[${user.familyName}]！</span>
		<button id="quit" onclick="quitFun()">退出</button>
		<div class="logo"><a href="pageController/index"><img src="images/logo.png" alt="" /></a></div>
		<div class="nav">
			<ul>
				<li class="active"><a href="pageController/index">家庭主页</a></li>
				<li><a href="pageController/myFamily">我的家庭</a></li>
				<li><a href="pageController/dynamics?familyId=${user.familyId}"><span style="color:blue;">家庭动态</span></a></li>
				<li><a href="pageController/photo?userId=${user.id}">家庭相册</a></li>
			</ul>
		</div>
		<div class="clear"></div>
	</div>
</div>
<!--head结束-->

<div id="header">
	<div class="wrap">
		<div class="banner">
			<ul class="texts">
				<p style="font-size:21px; font-family: 华文行楷">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;家，永远在我的记忆里，在我的意识里，在醒来梦去的眸子里，清晰如昨。 </p>
				<p style="font-size:21px; font-family: 华文行楷">&nbsp;&nbsp;&nbsp;&nbsp;家是温馨的港湾，容纳漂泊的灵魂；家是如伞的大树，遮挡酷夏的骄阳；</p>
				<p style="font-size:21px; font-family: 华文行楷">家是清凉的雨丝，拂去疲惫的征尘；家是永远的牵挂，珍藏幸福的存根。</p>
			</ul>
		</div>
		<div class="clear"></div>
	</div>
</div>
<iframe style="display:none" name=if0 ></iframe>
<!--header结束-->
<div id="main">
	<div class="wrap">
		<div class="talk">
			<textarea id="talk1" name="talk1" placeholder="发个心情吧！"></textarea>
			<div class="submit">
				<form enctype="multipart/form-data" method="post" id="uploadfiles">
					<input type="file" name="picture" id="picture" accept=".jpg,bmp,.gig,.png,.tif,.rgb,.dib,.eps,.jpe,.pcx,.bmp,.gif"/>
					<button type="button" name="submit" id="submit" onclick="talkFun()" >发表</button>
				</form>
			</div>
		</div>

		<c:forEach items="${speaks}" var="speak" varStatus="speaks">
		<div class="show">
			<c:set var='suser' value='${speak.userName}'></c:set>
			<c:set var='user1' value='${user.userName}'></c:set>
			<div class="user_head" <c:if test="${suser==user1}">onmouseover="$('#d${speak.id}').show()" onmouseleave="$('#d${speak.id}').hide()" </c:if>>
			<!-- 需要加样式固定 -->
				<font size="5" <c:if test="${suser==user1}">color="#99CC00"</c:if> face="verdana"><span>${speak.userName}&nbsp;&nbsp;</span></font>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<button id="d${speak.id}" onclick="firmSpeak('${speak.id}')" hidden="" style="position: absolute;">删除动态</button></br>
					${speak.createTime}
				</br>
			</div>
			<c:if test="${speak.picture!=''}">
				<figure>
					<img src="${speak.picture}" >
				</figure>
			</c:if>

			<ul>
				<p>&nbsp;<font size="4">${speak.content}</font></p>
			</ul>
			<div class="clear" style="clear:both;"></div>
			<div class="talking">
				<div class="heart" id="like${speak.id}" rel="like" onclick="good('${speak.id}')"></div><div id="txt" class="txt">${speak.good} <c:if test="${speak.good!=''}">等觉得很赞！</c:if></div>
				<div style="clear:both;"></div>
				<c:set var='key' value='${speak.id}'></c:set>
				<c:forEach items="${comments[key]}" var="comment" varStatus="comments">
				<p><span>
					    <c:set var='cuser' value='${speak.userName}'></c:set>
                    	<c:set var='user2' value='${user.userName}'></c:set>
							<%--如果该条说说是当前用户发表的，他就可以看到删除按钮，可以执行删除--%>
							<div id="div${comment.id}"
									<c:choose>
										<c:when test="${cuser==user2}">onmouseover="$('#b${comment.id}').show(),$('#d${comment.id}').show()" onmouseleave="$('#b${comment.id}').hide(),$('#d${comment.id}').hide()"</c:when>
										<c:otherwise>onmouseover="$('#b${comment.id}').show()" onmouseleave="$('#b${comment.id}').hide()"</c:otherwise>
									</c:choose>>

                    		<!-- 字体样式冲突，需要动态显示出当前用户的评论动作 -->

                    	<font <c:if test="${cuser==user2}">color="#99CC00"</c:if> face="verdana"><span>&nbsp;&nbsp;${comment.userName}&nbsp;:&nbsp;</span></font>
								<%--<font size="2">--%>${comment.content}<%--</font>--%>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<button id="b${comment.id}" onclick="if($('#div1${comment.id}').is(':hidden')){$('#div1${comment.id}').show();}else{$('#div1${comment.id}').hide();}" hidden="" style="position: absolute;">回复</button>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<button id="d${comment.id}" onclick="firm('${comment.id}',${comment.hasCom})" hidden="" style="position: absolute; size: 5px">删除评论</button>
							</br>
				<div id="div1${comment.id}" hidden=""></br>
					<input type="text" id="${comment.id}" style="width:300px;" />
					<button type="submit" name="submit" value="" onclick="cmt('${comment.id}')">发表</button>
				</div>
			</div>

			</p>
			<c:if test="${comment.hasCom==true}">
				<c:set var='key1' value='${comment.id}'></c:set>
				<c:forEach items="${selfComments[key1]}" var="selfComment" varStatus="selfComments">
					<font size="2"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${selfComment.userName}&nbsp;回复&nbsp;${comment.userName}&nbsp;:&nbsp;${selfComment.content}</span></font> </br>
				</c:forEach>
			</c:if>
			</c:forEach>
			<div class="comment">
				<input type="text" id="com${speak.id}" name="com" class="com" placeholder="快来评论一番吧" /><img src="images/comment.png">
				<button type="submit" name="submit" value="发表" onclick="commentFun('${speak.id}')">发表</button>
			</div>
		</div>
	</div>
	</c:forEach>

	<div class="clear"></div>
</div>
</div>
<!--main结束-->
<div class="foot">
	<div class="wrap">
		<div id="fbr">
			<p style="font-size:15px; font-family: 华文行楷">Copyright &copy; 家庭博客（2017）.</p>
			<div class="ft-nav">
				<ul>
					<li class="active"><a href="pageController/index">家庭主页</a></li>
					<li><a href="pageController/myFamily">我的家庭</a></li>
					<li><a href="pageController/dynamics?familyId=${user.familyId}"><span style="color:blue;">家庭动态</span></a></li>
					<li><a href="pageController/photo?userId=${user.id}">家庭相册</a></li>
				</ul>
			</div>
			<div class="clear"></div>
		</div>
	</div>
</div>
</body>
</html>